import QtQuick 2.12
import QtQuick.Layouts 1.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtQml 2.12
import QtQml.Models 2.12

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Desktop")

    ColumnLayout {
        RowLayout {
            spacing: 6
            Rectangle {
                Layout.fillWidth: true
                Layout.minimumWidth: 180
                Layout.maximumWidth: 180
                Text{
                    anchors.centerIn: parent
                    text: "背景"
                }
            }

            ComboBox {
                id: selector
                model: ["图片", "纯色"]
                onCurrentIndexChanged: {
                    if(selector.currentIndex == 0) {
                        box1.visible = true
                        box2.visible = false
                    }else if(selector.currentIndex == 1) {
                        box1.visible = false
                        box2.visible = true
                    }
                }
            }

        }

        // 图片
        RowLayout {
            id: box1
            visible: false
            Rectangle {
                Layout.fillWidth: true
                Layout.minimumWidth: 180
                Layout.maximumWidth: 180
                Text{
                    anchors.centerIn: parent
                    text: "选择图片"
                }
            }

            Component {
                id: wallpaperDelegate
                Image {
                    source: uri
                    sourceSize.width: 76
                    sourceSize.height: 76

                    Rectangle {
                        id: hh
                        anchors.fill: parent
                        color: "transparent"
                        border {
                            color: "red"
                            width: 2
                        }
                        visible: false
                    }

                    MouseArea {
                        anchors.fill: parent
                        hoverEnabled: true
                        onEntered: {
                            hh.visible = true
                        }

                        onExited: {
                            hh.visible = false
                        }

                        onClicked: {
                            console.log($wingo)
                            console.log("hhhh")
                        }
                    }
                }
            }

            GridView{
                height: 188 // 47 * 4
                width: 368 // 46 * 8
                cellWidth: 79
                cellHeight: 76
                Component.onCompleted: {
                    $wingo.sig_get_wallpapers.connect(getWallpapers)
                }
                delegate: wallpaperDelegate
                model: ListModel {
                    id: wallpapers
                }
            }
        }

        // 纯色
        RowLayout {
            id: box2
            visible: false

            Rectangle {
                Layout.fillWidth: true
                Layout.minimumWidth: 180
                Layout.maximumWidth: 180
                Text{
                    anchors.centerIn: parent
                    text: "选择你的背景色"
                }
            }

            Component {
                id: pureColorDelegate

                Rectangle {
                    width: 44
                    height: 44
                    color: color_value

                    Rectangle {
                        id: hh1
                        anchors.fill: parent
                        color: "transparent"
                        border {
                            color: "#000000"
                            width: 2
                        }
                        visible: false
                    }

                    MouseArea {
                        anchors.fill: parent
                        hoverEnabled: true
                        onEntered: {
                            hh1.visible = true
                        }

                        onExited: {
                            hh1.visible = false
                        }
                        onClicked: {
                            setColorWallpaper(color_value)
                        }
                    }
                }
            }

            GridView {
                height: 188 // 47 * 4
                width: 368 // 46 * 8
                cellWidth: 46
                cellHeight: 47
                Component.onCompleted: {
                    $wingo.sig_get_pureColors.connect(getPureColors)
                }
                delegate: pureColorDelegate
                model: ListModel {
                    id: pureColors
                }
            }



        }
   }

    function getWallpapers(papers) {
        wallpapers.clear();
        for(var i = 0 ; i < papers.length; i++) {
            wallpapers.append(papers[i])
        }
    }

    function getPureColors(colors) {
        pureColors.clear()
        for(var i = 0 ; i < colors.length ; i++) {
            pureColors.append(colors[i])
        }
    }

    function setColorWallpaper(color_value) {
        $wingo.setColorWallpaper(color_value)
    }
}
